<template>
	<div class="system-add-role-container">
		<el-dialog title="新增用户信息" :close-on-click-modal="false" v-model="isShowDialog" width="769px">
			<el-form :model="rulesForm" :rules="rules" size="small" label-width="90px" ref="ruleFormRef">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="所属账号">
							<el-select v-model="ruleForm.type" placeholder="请选择所属账号" style="width: 260px;">
								<el-option label="中心社" value="0"></el-option>
								<el-option label="分社" value="1"></el-option>
								<el-option label="高校" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"
						v-if="ruleForm.type==='1'|| ruleForm.type==='2'">
						<el-form-item label="所属地区">
							<el-select v-model="ruleForm.region" placeholder="请选择所属地区" style="width: 260px;">
								<el-option v-for="(item,index) in regionList" :key="item.code " :label="item.name"
										   :value="item.code"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="账号">

							<el-input v-model="ruleForm.account" placeholder="请输入账号" clearable></el-input>

						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.type==='0'">
						<el-form-item label="密码">
							<el-input v-model="ruleForm.password" placeholder="请输入密码">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="ruleForm.name" placeholder="请输入姓名">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态">
							<el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 260px;">
								<el-option label="启用" value="1"></el-option>
								<el-option label="已禁用" value="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" 	v-show="ruleForm.type==='2'">
						<el-form-item label="所属高校">
							<el-cascader
									v-model="dataList"
									:options="data"
									placeholder="请选择高校"
									:props="{ multiple: true, }"
									clearable
									collapse-tags
									@change="changeLabel"
									filterable
									style="width: 260px;">
							</el-cascader>
						</el-form-item>

					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="学历层次">
							<el-select v-model="ruleForm.xlcc" placeholder="请选择学历层次" size="small"
								style="width: 260px" >
								<el-option label="研究生" value="1"></el-option>
								<el-option label="普通本科" value="2"></el-option>
								<el-option label="普通专科" value="3"></el-option>
								<el-option label="成人本科" value="4"></el-option>
								<el-option label="成人专科" value="5"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->

				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
	import { reactive, toRefs, onMounted, ref, } from 'vue';
	import type { ElForm } from 'element-plus';
	import { ElMessage } from 'element-plus';
	import { regionGet , universities} from '../../../api/home/index'
	import rulesForm from './rules';
	export default {
		name: 'systemAddRole',
		emits: ['update'],
		setup(props, { emit }) {
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					account: '', // 账号
					name: '',//用户姓名
					// password: '',//密码
					region: '',//地区
					schoolId: '', // 院校
					status: '', // 状态
					type: '',//账号类型
					xlcc: '',
				},
				menuData: [],
				menuProps: {
					children: 'children',
					label: 'label',
				},
				regionList: [],
				dataList: [],
				data:[],

				shareScopeEnd: [],


			});
			const rules = reactive(rulesForm);
			const ruleFormRef = ref<InstanceType<typeof ElForm>>();
			// 打开弹窗
			const openDialog = () => {
				ruleFormRef.value?.resetFields();
				state.isShowDialog = true;
				state.ruleForm = {}
				// initTree()
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};
			// 新增
			const onSubmit = () => {
        debugger
					let params = JSON.parse(JSON.stringify(state.ruleForm))
					let listData = JSON.parse(JSON.stringify(state.dataList))
					// console.log(listData)

					let list = []
					listData.forEach(ele => {
						params.schoolId = ele[0]
						list.push(ele[1])
					})
					params.xlcc = list.map((item) => {
						return item
					}).join(',')
					console.log(listData)
					emit('update', params)


				// ruleFormRef.value.validate((valid) => {
				// 	if (valid) emit('update', params);
				// 	console.log('000')
				// });



				// closeDialog();
			};

			//获取地区列表
			const initRegion = () => {
				regionGet({}).then((res) => {
					state.regionList = res.data
				})
			}
			//高校tree
			const initTree= () => {
				universities({}).then((res) => {
					state.data = res.data
				})
			}
			const changeLabel = (val: Object) => {
				// 是否与上次的类型相同
				let changeFlag = false
				let changeItem = null
				if (state.shareScopeEnd.length == 0) {
					// this.value = val
					state.dataList = val
				} else {
					// 与原数组比对
					state.dataList.forEach((item) => {
						if (item[0] !== state.shareScopeEnd[0][0]) { // 一级标签不同
							changeFlag = true
							changeItem = item
						}
					})
				}
				if (changeFlag) {
					state.dataList = []
					state.dataList.push(changeItem)
				}
				state.shareScopeEnd = state.dataList
			}




			onMounted(() => {
				initRegion()
				initTree()
			});
			return {
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				changeLabel,
				rules,
				ruleFormRef,
				...toRefs(state),
			};
		},
	};
</script>

<style  lang="scss">
	::v-deep .system-add-role-container {
		.menu-data-tree {
			border: var(--el-input-border, var(--el-border-base));
			border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
			padding: 5px;
		}

	}

	.el-cascader-panel {
		.el-scrollbar:first-child {
			.el-checkbox {
				display: none;
			}
		}
	}
</style>
